<p>Para finalizar los capitulos más teóricos y funcionales de jQuery (luego vendrán algunos de comunicación asíncrona) hoy vamos a ver como acabar de manejar los eventos si necesitasemos pararlos o si quisieramos que cierta animación tuviera un retraso con respecto al click.</p>
<p>Para poder parar la ejecución de una animación que hayamos generado con jQuery basta con usar el método ".Stop". A este método además de llamarlo se le pueden pasar algunos parámetros, .stop( [clearQueue ] [, jumpToEnd ] , el primero de ellos indica si se debe limpiar la cola de eventos y el segundo si además de limpiar la cola de eventos queremos que el evento actual se finalice a los valores destino antes de dar por finalizada la animación. En mi caso sólo le voy a pasar el primero, para que la animación se pare en el momento en que clickemos el botón.</p>
<p>Tras parar la animación podemos luego volver a animar los objetos seleccionados de forma que si seleccionamos que con un botón se junten dos elementos y luego que se separen, el evento sucederá en el momento del click y no tras finalizar por completo el anterior evento. Esto soluciona el hecho que si por ejemplo clickaramos en un botón que tuvieramos programado con un slideToggle si le damos 10 veces y esperamos, veremos como tenemos que esperar a las 10 ejecuciones del mismo, de la otra manera, sólo tendremos que esperar por la última animación clickada, acortando los retrasos que tan poco nos gustan a los usuarios. Un ejemplo podría ser el siguiente:</p>
<pre>
$('#btJuntar').click(function(){
	$('.box1').stop(true);
	$('.box1').animate({
	marginBottom:0,
	opacity:0.5
	}, 5000);
});
</pre>
<p>La otra función que vamos a ver hoy es la que introduce un retardo entre dos animaciones, es el método ".Delay". A este método le pasamos el tiempo que queremos que se retrase la animación en milisegundos. Con este método podemos configurar un botón de modo que se produzca una animación, se finalice, se espere un tiempo y se produzca otra animación tras esta, de modo que las animaciones quedan separadas temporalmente, por ejemplo: 
<pre>
$('#btDelay').click(function(){
	$('.box1').animate({
		marginBottom:0,
		opacity:0.5
	}, 1000).delay(3000).animate({
		marginBottom:100,
		opacity:1
	}, 4000);
});
</pre>
<p>Con esto establecemos que tras pulsar el botón Delay y finalizarse la animación se produzca una espera de 3 segundos y se genere la siguiente animación del elemento. Veamos el código del ejemplo:</p>

<pre>
<button id="btJuntar">Juntar</button>
<button id="btSeparar">Separar</button>
<button id="btParar">Parar</button>
<button id="btDelay">Delay</button>
<div class="ejemplos jqCap19 box1"></div>
<div class="ejemplos jqCap19 box2"></div>

<script type="text/javascript">	
$(document).on('ready', function(){
	
	$('.jqCap19').css('margin', '0px auto');
	$('.box1').css('margin-bottom', '100px');			
	
	
	$('#btJuntar').click(function(){
		$('.box1').stop(true);
		$('.box1').animate({
			marginBottom:0,
			opacity:0.5
		}, 5000);
	});
	
	$('#btSeparar').click(function(){
		$('.box1').stop(true);
		$('.box1').animate({
			marginBottom:100,
			opacity:1
		}, 5000);
	});
	
	$('#btParar').click(function(){
		$('.box1').stop(true);
	});
	
	$('#btDelay').click(function(){
		$('.box1').animate({
			marginBottom:0,
			opacity:0.5
			}, 1000).delay(3000).animate({
			marginBottom:100,
			opacity:1
		}, 4000);
	});
});
</script>
</pre>

<p>Y a continuación podreis probarlo sin tener que escribir vosotros ni una sóla linea de código:
<button id="btJuntar">Juntar</button>
<button id="btSeparar">Separar</button>
<button id="btParar">Parar</button>
<button id="btDelay">Delay</button>
<div class="ejemplos jqCap19 box1"></div>
<div class="ejemplos jqCap19 box2"></div>	
<script type="text/javascript" src="http://www.rfsouto.com/Scripts/capitulo19.js"></script>
<script type="text/javascript">
	<!--
	jqStopDelay();
	//-->
</script></p>
